<template>
    <div class="menu_config_new">
        <!-- 步骤条 -->
        <div calss="step">
            <el-steps :active="step" simple>
                <el-step title="选择类型" icon="el-icon-thumb"></el-step>
                <el-step title="配置页面" icon="el-icon-s-operation"></el-step>
                <el-step title="生成页面" icon="el-icon-check"></el-step>
            </el-steps>
        </div>
        <!-- 菜单配置 -->
        <div class="content">
            <el-form ref="form" :model="menuForm" label-width="100px" label-position="left">
                <div class="content_config">
                    <!-- 页面类型 -->
                    <template v-if="step === 0">
                        <div>
                            <el-form-item>
                                <template slot="label">
                                    <div class="content_config_label">页面类型</div>
                                </template>
                                <el-radio-group v-model="menuForm.type">
                                    <el-radio :label="1" v-if="!menuName.includes('editMenu')">文本</el-radio>
                                    <!-- v-if="!menuName.includes('editMenu')" -->
                                    <el-radio :label="2" >图表</el-radio>
                                    <el-radio :label="3">表</el-radio>
                                    <el-radio :label="4">图</el-radio>
                                    <el-radio :label="5">网页</el-radio>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item>
                                <template slot="label">
                                    <div class="content_config_label">示例</div>
                                </template>
                                <div class="sample_picture">
                                    <el-image :src="require(`@/assets/${pic}.png`)" lazy style="width:100%;"></el-image>
                                </div>
                            </el-form-item>
                        </div>
                    </template>
                    <!-- 页面配置 -->
                    <template v-if="step === 1">
                        <!-- 文本 -->
                        <template v-if="menuForm.type === 1">
                            <div class="content_config_config">
                                <vue-editor v-model="editorText" />
                                <div class="btn_text">
                                    <el-button type="primary" @click="addText">更新</el-button>
                                </div>
                            </div>
                            <div class="content_config_show">
                                <div class="show_text" v-html="menuForm.text">

                                </div>
                                <i class="el-icon-edit showEdit" @click="editText"></i>
                            </div>
                        </template>
                        <!-- 其他页面 -->
                        <template v-else>
                            <div class="content_config_config">
                                <template v-if="activeName === 'Instructions'">
                                    <div class="config_chart_item">
                                        <el-upload class="upload-demo" drag :file-list="pictureList" action=""
                                            :on-change="changeUpload" :on-remove="removePictureList"
                                            :before-remove="beforeRemove" :http-request="pictureListUpload"
                                            list-type="picture" ref="upload">
                                            <i class="el-icon-upload"></i>
                                            <!-- multiple -->
                                            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                                        </el-upload>
                                    </div>
                                </template>
                                <template v-else-if="activeName === 'specification'">
                                    <div class="config_chart_item">
                                        <el-upload class="upload-demo" drag :file-list="pictureList2" action=""
                                            :on-change="changeUpload2" :on-remove="removePictureList2"
                                            :before-remove="beforeRemove" :http-request="pictureListUpload2"
                                            list-type="picture" ref="upload">
                                            <i class="el-icon-upload"></i>
                                            <!-- multiple -->
                                            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                                        </el-upload>
                                    </div>
                                </template>
                                <template v-else-if="activeName === 'table'">
                                    <div class="config_table_item">
                                        <div class="config_table_title">
                                            {{ menuForm.tableName }}
                                        </div>
                                        <div class="config_table_item_top" ref="sortRef">
                                            <div class="item" v-for="item in menuForm.tableList">
                                                {{ item.label }}
                                                <i class="el-icon-delete" @click="deleteTableItem(item.id)"></i>
                                            </div>
                                        </div>
                                        <div class="config_table_item_bottom">暂无数据</div>
                                    </div>
                                </template>
                                <template v-else-if="activeName === 'script'">
                                    <div class="title">下载格式选择</div>
                                    <div class="content">
                                        <el-checkbox-group v-model="menuForm.downloadItem">
                                            <el-checkbox label="jpg">JPG下载</el-checkbox>
                                            <el-checkbox label="png">PNG下载</el-checkbox>
                                            <el-checkbox label="result">结果文件</el-checkbox>
                                            <el-checkbox label="svg">SVG下载</el-checkbox>
                                            <el-checkbox label="pdf">PDF下载</el-checkbox>
                                            <el-checkbox label="resultFile">结果表格</el-checkbox>
                                        </el-checkbox-group>
                                    </div>
                                </template>
                                <template v-else>
                                    <div class="config_chart">
                                        <div class="config_chart_item" v-if="activeName === 'chart'">
                                            <div class="chart_title">基本设置</div>
                                            <div class="chart_content">
                                                <div class="chart_content_items setting" v-for="item in settingList">
                                                    {{ item.title }}
                                                    <i class="el-icon-plus" @click="addComponent(item.type)"></i>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="config_chart_item" v-else>
                                            <div class="chart_title">基本设置</div>
                                            <div class="chart_content">
                                                <div class="chart_content_items setting" v-for="item in analysisList">
                                                    {{ item.title }}
                                                    <i class="el-icon-plus" @click="addComponent(item.type)"></i>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="config_chart_custom">
                                            <div class="chart_title">自定义组件</div>
                                            <div class="chart_content">
                                                <div class="chart_content_items" v-for="item in customList">
                                                    <div class="title">
                                                        {{ item.title }}
                                                    </div>
                                                    <!-- 下拉选择器 -->
                                                    <template v-if="item.type === 'select'">
                                                        <div class="item">
                                                            <el-select :value="'value'" placeholder="请选择">
                                                                <el-option v-for="a in options" :key="a.value"
                                                                    :label="a.label" :value="a.value">
                                                                </el-option>
                                                            </el-select>
                                                        </div>
                                                    </template>
                                                    <!-- 颜色选择器 -->
                                                    <template v-if="item.type === 'color'">
                                                        <div class="vies_items_color item">
                                                            <el-color-picker :value="'#000000'"
                                                                style="float: left;"></el-color-picker>
                                                            <span>#000000</span>
                                                        </div>
                                                    </template>
                                                    <!-- 输入框 -->
                                                    <template v-if="item.type === 'input'">
                                                        <div class="item">
                                                            <el-input />
                                                        </div>
                                                    </template>
                                                    <!-- 滑块 -->
                                                    <template v-if="item.type === 'slider'">
                                                        <div class="slider item">
                                                            <el-tooltip effect="dark" content="提示语" placement="top">
                                                                <i class="el-icon-question"></i>
                                                            </el-tooltip>
                                                            <el-slider :value="100" :max="200" :min="1"
                                                                :step="1"></el-slider>
                                                        </div>
                                                    </template>
                                                    <!-- 复选框 -->
                                                    <template v-if="item.type === 'check'">
                                                        <el-checkbox :value="true">复选框A</el-checkbox>
                                                        <el-checkbox :value="false">复选框B</el-checkbox>
                                                    </template>
                                                    <!-- 单选框 -->
                                                    <template v-if="item.type === 'radio'">
                                                        <el-radio :value="'0'" label="0">单选框A</el-radio>
                                                        <el-radio :value="'0'" label="1">单选框B</el-radio>
                                                    </template>
                                                    <!-- 开关 -->
                                                    <template v-if="item.type === 'switch'">
                                                        <el-switch :value="true" active-text="右侧文本" inactive-text="左侧文本">
                                                        </el-switch>
                                                    </template>
                                                    <!-- 图标选择器 -->
                                                    <template v-if="item.type === 'iconSelector'">
                                                        <el-select v-model="icons" placeholder="请选择图标" ref="iconSelector"
                                                            multiple collapse-tags>
                                                            <el-option v-for="item in selectorList" :key="item.value"
                                                                :label="item.value" :value="item.value">
                                                                <i class="iconfont" :class="item.label"
                                                                    style="font-size:25px;"></i>
                                                            </el-option>
                                                        </el-select>
                                                    </template>
                                                    <i class="el-icon-plus" @click="addComponent(item.type)"></i>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="config_chart_common">
                                            <div class="chart_title">常用组件</div>
                                            <div class="chart_content">
                                                <div class="chart_content_items" v-for="item in commonList">
                                                    <div class="title">
                                                        {{ item.title }}
                                                    </div>
                                                    <!-- 颜色编辑器 -->
                                                    <template v-if="item.type === 'colorMultiple'">
                                                        <div class="colorMultiple">
                                                            <span
                                                                v-for="(i, y) in selectColorList[0].content.filter((item, index) => index < 6)"
                                                                :key="y" :style="`backgroundColor:${i}`"></span>
                                                            <div>Science</div>
                                                        </div>
                                                    </template>
                                                    <!-- 标题 -->
                                                    <template v-if="item.type === 'defaultTitle'">
                                                        <el-input></el-input>
                                                    </template>
                                                    <!-- 常用字体1 -->
                                                    <template v-if="item.type === 'defaultSize'">
                                                        <div class="defaultSize">
                                                            <el-select filterable :value="'Arial'" class="fontFamliy">
                                                                <el-option v-for="(item, index) in fontOptions"
                                                                    :label="item.label" :value="item.value"
                                                                    :key="index"></el-option>
                                                            </el-select>
                                                            <el-select :value="12" class="fontSize">
                                                                <el-option v-for="(item, index) in SizeOptions"
                                                                    :label="item" :value="item" :key="index"></el-option>
                                                            </el-select>
                                                            <div class="weight">
                                                                B
                                                            </div>
                                                            <div class="italic">
                                                                I
                                                            </div>
                                                        </div>
                                                    </template>
                                                    <!-- 常用字体2 -->
                                                    <template v-if="item.type === 'defaultSize2'">
                                                        <div class="defaultSize">
                                                            <el-select filterable :value="'Arial'" class="fontFamliy">
                                                                <el-option v-for="(item, index) in fontOptions"
                                                                    :label="item.label" :value="item.value"
                                                                    :key="index"></el-option>
                                                            </el-select>
                                                            <div class="weight">
                                                                B
                                                            </div>
                                                            <div class="italic">
                                                                I
                                                            </div>
                                                        </div>
                                                    </template>
                                                    <!-- 颜色 -->
                                                    <template v-if="item.type === 'defaultColor'">
                                                        <div class="vies_items_color vies_items">
                                                            <el-color-picker :value="'#000000'"
                                                                style="float: left;"></el-color-picker>
                                                            <span>#000000</span>
                                                        </div>
                                                    </template>
                                                    <!-- 颜色双 -->
                                                    <template v-if="item.type === 'doubleColor'">
                                                        <el-color-picker :value="'#000000'"
                                                            style="margin-right:1.5vh;"></el-color-picker>
                                                        <el-color-picker :value="'#000000'"></el-color-picker>
                                                    </template>
                                                    <!-- 旋转角度 -->
                                                    <template v-if="item.type === 'defaultAngle'">
                                                        <el-select :value="30" filterable>
                                                            <el-option v-for="(item, index) in RotateOptions" :label="item"
                                                                :value="item" :key="index"></el-option>
                                                        </el-select>
                                                    </template>
                                                    <!-- 隔断文本 -->
                                                    <template v-if="item.type === 'text'">

                                                    </template>
                                                    <!-- 是否选择器 -->
                                                    <template v-if="item.type === 'defaultRadio'">
                                                        <el-radio :value="'1'" label="1">是</el-radio>
                                                        <el-radio :value="'1'" label="0">否</el-radio>
                                                    </template>
                                                    <!-- 数字下拉 -->
                                                    <template v-if="item.type === 'defaultSelect'">
                                                        <el-select :value="1" placeholder="请选择" style="width: 200px;">
                                                            <el-option v-for="item in 20" :key="item" :label="item"
                                                                :value="item">
                                                            </el-option>
                                                        </el-select>
                                                    </template>
                                                    <!-- 丰度取值 -->
                                                    <template v-if="item.type === 'abundance'">
                                                        <div class="slider item">
                                                            <el-tooltip effect="dark" content="提示语" placement="top">
                                                                <i class="el-icon-question"></i>
                                                            </el-tooltip>
                                                            <div class="top_item">
                                                                <el-input :value="50">
                                                                    <template slot="prepend">TOP</template>
                                                                </el-input>
                                                            </div>
                                                        </div>
                                                    </template>
                                                    <!-- 互斥下拉框 -->
                                                    <template v-if="item.type === 'mutualExclusion'">
                                                        <template v-for="(item, index) in mutualExclusion">
                                                            <el-select v-model="item.value" placeholder="请选择">
                                                                <el-option v-for="opt in mutualExclusionOptions"
                                                                    :key="opt.value" :label="opt.label" :value="opt.value"
                                                                    :disabled="setDisabled(opt, index)"></el-option>
                                                            </el-select>
                                                        </template>
                                                    </template>
                                                    <i class="el-icon-plus" @click="addComponent(item.type)"></i>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </template>
                            </div>
                            <div class="content_config_show">
                                <el-tabs v-model.trim="activeName">
                                    <el-tab-pane label="表格设置" name="table" v-if="menuForm.type == 2 || menuForm.type == 3">
                                        <div class="content_config_show_name">
                                            <el-input placeholder="请输入表格名称" v-model="tableName" clearable></el-input>
                                            <el-button type="primary" size="mini" @click="addTableName"
                                                :disabled="!tableName">确定</el-button>
                                        </div>
                                        <el-button type="primary" @click="addTableList">新增列</el-button>
                                        <el-button @click="resetTableList">重置</el-button>
                                    </el-tab-pane>
                                    <!-- v-if="menuForm.type !== 3" -->
                                    <el-tab-pane label="分析设置" name="Analysis">
                                        <div class="collapse_content" ref="Analysis_content">
                                            <div v-for="(item, b) in menuForm.analysisConfig" class="content_items"
                                                :key="item.id">
                                                <el-form-item>
                                                    <template slot="label" v-if="item.type !== 'circleItem'">
                                                        <el-tooltip class="item" effect="dark" :content="item.title"
                                                            placement="top">
                                                            <div class="form_label_length">
                                                                {{ item.title }}
                                                            </div>
                                                        </el-tooltip>
                                                    </template>
                                                    <!-- 互斥下拉框 -->
                                                    <div v-if="item.type === 'mutualExclusion'" class="mutualExclusion">
                                                        <template v-for="(a, b) in mutualExclusion">
                                                            <el-select v-model="a.value" size="small"
                                                                style="width:45%;margin-right:5%;">
                                                                <el-option v-for="opt in mutualExclusionOptions"
                                                                    :key="opt.value" :label="opt.label" :value="opt.value"
                                                                    :disabled="setDisabled(opt, b)"></el-option>
                                                            </el-select>
                                                        </template>
                                                    </div>
                                                    <!-- 丰度取值 -->
                                                    <div class="select_items top_item abundance_item"
                                                        v-if="item.type === 'abundance'">
                                                        <el-row>
                                                            <el-col :span="20">
                                                                <div class="abundance_dom">
                                                                    <el-input-number :value="item.default" :min="1"
                                                                        :max="Number(item.max) || 10000">
                                                                    </el-input-number>
                                                                    <div class="abundance_dom_prepend">TOP
                                                                    </div>
                                                                </div>
                                                            </el-col>
                                                            <el-col :span="4">
                                                                <el-tooltip class="item" effect="dark" placement="top">
                                                                    <div slot="content">{{ item.tooltip }}
                                                                    </div>
                                                                    <i class="el-icon-question"
                                                                        style="margin-left: 15px;transform: scale(1.5)translateY(-2px);"></i>
                                                                </el-tooltip>
                                                            </el-col>
                                                        </el-row>
                                                    </div>
                                                    <!-- select下拉组件（单） -->
                                                    <div class="select_items">
                                                        <el-select :value="item.default" size="small" clearable
                                                            v-if="item.type === 'select' || item.type === 'defaultSelect' || item.type === 'defaultAngle'">
                                                            <el-option v-for="(i, y) in item.data" :key="y" :label="i.label"
                                                                :value="i.value">
                                                            </el-option>
                                                        </el-select>
                                                    </div>
                                                    <!-- radio单选框 -->
                                                    <el-radio-group :value="item.default"
                                                        v-if="item.type === 'radio' || item.type === 'defaultRadio'">
                                                        <el-radio :label="i.value" v-for="(i, y) in item.data" :key="y">{{
                                                            i.label
                                                        }}</el-radio>
                                                    </el-radio-group>
                                                    <!-- 文本 -->
                                                    <div v-if="item.type == 'text'" class="text_style">
                                                        {{ item.title || '' }}
                                                    </div>
                                                    <!-- 颜色选择（双） -->
                                                    <div v-if="item.type === 'doubleColor'">
                                                        <el-color-picker :value="item.default"
                                                            style="margin-right: 15px;"></el-color-picker>
                                                        <el-color-picker :value="item.default2"></el-color-picker>
                                                    </div>
                                                    <!-- 颜色选择器（单） -->
                                                    <div class="colorPicker"
                                                        v-if="item.type == 'color' || item.type == 'defaultColor'">
                                                        <el-color-picker :value="item.default"></el-color-picker>
                                                        <div class="title">{{ item.default }}</div>
                                                    </div>
                                                    <!-- 字体2 -->
                                                    <div v-if="item.type === 'defaultSize2'" class="weightAndItalic">
                                                        <div class="famliy">
                                                            <el-select :value="item.default" filterable>
                                                                <el-option v-for="(item, index) in fontOptions"
                                                                    :label="item.label" :value="item.value"
                                                                    :key="index"></el-option>
                                                            </el-select>
                                                        </div>
                                                        <el-tooltip class="item" effect="dark" content="加粗" placement="top">
                                                            <div class="weight"
                                                                :class="{ 'select': Boolean(item.default3) }">
                                                                B
                                                            </div>
                                                        </el-tooltip>

                                                        <el-tooltip class="item" effect="dark" content="斜体" placement="top">
                                                            <div class="italic"
                                                                :class="{ 'select': Boolean(item.default4) }">
                                                                I
                                                            </div>
                                                        </el-tooltip>
                                                    </div>
                                                    <!-- 字体 -->
                                                    <div v-if="item.type === 'defaultSize'" class="weightAndItalic">
                                                        <div class="famliy">
                                                            <el-select :value="item.default" filterable>
                                                                <el-option v-for="(item, index) in fontOptions"
                                                                    :label="item.label" :value="item.value"
                                                                    :key="index"></el-option>
                                                            </el-select>
                                                        </div>
                                                        <div class="size">
                                                            <el-select :value="item.default2">
                                                                <el-option v-for="(item, index) in SizeOptions"
                                                                    :label="item" :value="item" :key="index"></el-option>
                                                            </el-select>
                                                        </div>
                                                        <el-tooltip class="item" effect="dark" content="加粗" placement="top">
                                                            <div class="weight"
                                                                :class="{ 'select': Boolean(item.default3) }">
                                                                B
                                                            </div>
                                                        </el-tooltip>

                                                        <el-tooltip class="item" effect="dark" content="斜体" placement="top">
                                                            <div class="italic"
                                                                :class="{ 'select': Boolean(item.default4) }">
                                                                I
                                                            </div>
                                                        </el-tooltip>
                                                    </div>
                                                    <!-- 输入框 -->
                                                    <div v-if="item.type === 'input' || item.type === 'defaultTitle'"
                                                        class="input">
                                                        <el-input :value="item.default" clearable>
                                                        </el-input>
                                                    </div>
                                                    <!-- 颜色选择器（多） -->
                                                    <div class="colorMultiple_show" v-if="item.type === 'colorMultiple'">
                                                        <span v-for="(a, b) in replaceColorList" :key="a"
                                                            :style="`backgroundColor:${a}`"></span>
                                                        <div>
                                                            <span>{{ item.default }}</span>
                                                            <i class="el-icon-arrow-down"></i>
                                                        </div>
                                                    </div>
                                                    <!-- 开关 -->
                                                    <div v-if="item.type === 'switch'" class="input">
                                                        <el-switch :value="Boolean(Number(item.default))"
                                                            :inactive-text="item.left" :active-text="item.right">
                                                        </el-switch>
                                                    </div>
                                                    <!-- check复选框 -->
                                                    <div class="select_items" v-if="item.type === 'check'">
                                                        <el-checkbox-group v-model="item.default">
                                                            <el-checkbox v-for="(i, y) in item.data" :key="y"
                                                                :label="i.value">{{ i.label
                                                                }}</el-checkbox>
                                                        </el-checkbox-group>
                                                    </div>
                                                    <!-- slider滑动组件 -->
                                                    <div class="breach_div" v-if="item.type === 'slider'">
                                                        <el-tooltip class="item" effect="dark" :content="item.tooltip"
                                                            placement="top">
                                                            <span class="breach_div_icon">
                                                                <i class="el-icon-question" v-if="item.tooltip"></i>
                                                            </span>
                                                        </el-tooltip>
                                                        <div class="breach_div_slider">
                                                            <el-slider :value="Number(item.default)" :max="Number(item.max)"
                                                                :min="Number(item.min)"
                                                                :step="Number(item.step)"></el-slider>
                                                        </div>
                                                    </div>
                                                    <!-- Xgroup/Ygroup -->
                                                    <div v-if="item.type === 'Xgroup' || item.type === 'Ygroup'"
                                                        class="group">
                                                        <el-radio-group :value="1" v-if="item.default.length === 2">
                                                            <el-radio :label="1">是</el-radio>
                                                            <el-radio :label="0">否</el-radio>
                                                        </el-radio-group>
                                                        <div class="group_item">
                                                            <div v-if="item.default.includes('1')">
                                                                <span>编辑分组</span>
                                                                <i class="el-icon-edit"></i>
                                                            </div>
                                                            <div v-if="item.default.includes('0')">
                                                                <span>编辑样本</span>
                                                                <i class="el-icon-refresh-left"></i>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <!-- file -->
                                                    <div v-if="item.type === 'file'" class="file_dom">
                                                        <el-input :value="item.code + '.txt'" disabled></el-input>
                                                        <el-button type="primary" size="small" disabled>上传</el-button>
                                                        <el-button type="primary" size="small" disabled
                                                            v-if="item.default2 !== 'multifile'">预览</el-button>
                                                    </div>
                                                    <!-- circleItem -->
                                                    <div v-if="item.type === 'circleItem'" class="circle_dom">
                                                        <el-form ref="form" :model="item" label-width="80px">
                                                            <el-form-item label="第1层">
                                                                <div class="circle_dom_first">
                                                                    <el-input :value="'genome'"
                                                                        style="width:80px"></el-input>
                                                                    <el-button type="primary" size="mini">上传</el-button>
                                                                    <div class="colorMultiple_show">
                                                                        <span v-for="(a, b) in CircleColorList" :key="a"
                                                                            :style="`backgroundColor:${a}`"></span>
                                                                        <div>
                                                                            <span>Science</span>
                                                                            <i class="el-icon-arrow-down"></i>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </el-form-item>
                                                            <el-form-item label="色 系">
                                                                <div class="colorMultiple_show">
                                                                    <span v-for="(a, b) in CircleColorList" :key="a"
                                                                        :style="`backgroundColor:${a}`"></span>
                                                                    <div>
                                                                        <span>Science</span>
                                                                        <i class="el-icon-arrow-down"></i>
                                                                    </div>
                                                                </div>
                                                            </el-form-item>
                                                            <el-form-item label="第2层">
                                                                <div class="circle_dom_second">
                                                                    <div class="colorMultiple_show second">
                                                                        <div>
                                                                            <span>code</span>
                                                                            <i class="el-icon-arrow-down"></i>
                                                                        </div>
                                                                    </div>
                                                                    <el-button type="primary" size="mini">上传</el-button>
                                                                    <el-color-picker :value="'#000000'"
                                                                        show-alpha></el-color-picker>
                                                                    <div class="colorMultiple_show second">
                                                                        <div>
                                                                            <span>折线图</span>
                                                                            <i class="el-icon-arrow-down"></i>
                                                                        </div>
                                                                    </div>
                                                                    <el-button icon="el-icon-plus"></el-button>
                                                                </div>
                                                            </el-form-item>
                                                            <el-form-item label="半 径">
                                                                <div style="display:flex;">
                                                                    <div style="width:320px;margin-right:20px;">
                                                                        <el-slider :value="1" :max="1" :min="0"
                                                                            :step="0.01"></el-slider>
                                                                    </div>
                                                                    <div>
                                                                        <el-tooltip class="item" effect="dark"
                                                                            content="固定半径" placement="top">
                                                                            <el-checkbox :value="false"></el-checkbox>
                                                                        </el-tooltip>
                                                                    </div>
                                                                </div>
                                                            </el-form-item>
                                                        </el-form>
                                                    </div>
                                                    <!-- 图标选择器 -->
                                                    <template v-if="item.type === 'iconSelector'">
                                                        <el-select v-model="item.default" placeholder="请选择图标"
                                                            ref="iconSelector" collapse-tags>
                                                            <template slot="prefix">
                                                                <div class="prefix_select">
                                                                    <i class="iconfont"
                                                                        :class="selectorList.find(i => i.value === item.default).label"
                                                                        style="font-size:25px;"></i>
                                                                </div>
                                                            </template>
                                                            <el-option
                                                                v-for="item in selectorList.filter(i => item.data.includes(i.value))"
                                                                :key="item.value" :label="item.value" :value="item.value">
                                                                <i class="iconfont" :class="item.label"
                                                                    style="font-size:25px;"></i>
                                                            </el-option>
                                                        </el-select>
                                                    </template>
                                                </el-form-item>
                                                <i class="el-icon-edit itemEdit" @click="editComponent(item)"
                                                    v-show="item.code !== 'data' || menuForm.analysisConfig.some(y => y.type === 'circleItem')"></i>
                                                <i class="el-icon-delete itemDelete"
                                                    @click="delComItem(menuForm.analysisConfig, item.id)"
                                                    v-show="item.code !== 'data' || menuForm.analysisConfig.some(y => y.type === 'circleItem')"></i>
                                            </div>
                                        </div>
                                    </el-tab-pane>
                                    <!-- v-if="menuForm.type !== 3" -->
                                    <el-tab-pane label="图表调整" name="chart">
                                        <el-collapse accordion v-model="collapseName">
                                            <div ref="collapseSortRef">
                                                <div v-for="(data, value) in menuForm.legendConfig"
                                                    class="collapseSortRef_item">
                                                    <el-collapse-item :title="data.title" :name="data.id">
                                                        <div class="collapse_content"
                                                            :ref="`collapseItemSortRef${data.id}`">
                                                            <div v-for="(item, b) in data.config" class="content_items"
                                                                :key="item.id">
                                                                <el-form-item>
                                                                    <template slot="label">
                                                                        <el-tooltip class="item" effect="dark"
                                                                            :content="item.title" placement="top">
                                                                            <div class="form_label_length">
                                                                                {{ item.title }}
                                                                            </div>
                                                                        </el-tooltip>
                                                                    </template>
                                                                    <!-- 互斥下拉框 -->
                                                                    <div v-if="item.type === 'mutualExclusion'"
                                                                        class="mutualExclusion">
                                                                        <template v-for="(a, b) in mutualExclusion">
                                                                            <el-select v-model="a.value" size="small"
                                                                                style="width:45%;margin-right:5%;">
                                                                                <el-option
                                                                                    v-for="opt in mutualExclusionOptions"
                                                                                    :key="opt.value" :label="opt.label"
                                                                                    :value="opt.value"
                                                                                    :disabled="setDisabled(opt, b)"></el-option>
                                                                            </el-select>
                                                                        </template>
                                                                    </div>
                                                                    <!-- 丰度取值 -->
                                                                    <div class="select_items top_item abundance_item"
                                                                        v-if="item.type === 'abundance'">
                                                                        <el-row>
                                                                            <el-col :span="20">
                                                                                <div class="abundance_dom">
                                                                                    <el-input-number :value="item.default"
                                                                                        :min="1"
                                                                                        :max="Number(item.max) || 10000">
                                                                                    </el-input-number>
                                                                                    <div class="abundance_dom_prepend">TOP
                                                                                    </div>
                                                                                </div>
                                                                            </el-col>
                                                                            <el-col :span="4">
                                                                                <el-tooltip class="item" effect="dark"
                                                                                    placement="top">
                                                                                    <div slot="content">{{ item.tooltip }}
                                                                                    </div>
                                                                                    <i class="el-icon-question"
                                                                                        style="margin-left: 15px;transform: scale(1.5)translateY(-2px);"></i>
                                                                                </el-tooltip>
                                                                            </el-col>
                                                                        </el-row>
                                                                    </div>
                                                                    <!-- select下拉组件（单） -->
                                                                    <div class="select_items">
                                                                        <el-select :value="item.default" size="small"
                                                                            clearable
                                                                            v-if="item.type === 'select' || item.type === 'defaultSelect' || item.type === 'defaultAngle'">
                                                                            <el-option v-for="(i, y) in item.data" :key="y"
                                                                                :label="i.label" :value="i.value">
                                                                            </el-option>
                                                                        </el-select>
                                                                    </div>
                                                                    <!-- radio单选框 -->
                                                                    <el-radio-group :value="item.default"
                                                                        v-if="item.type === 'radio' || item.type === 'defaultRadio'">
                                                                        <el-radio :label="i.value"
                                                                            v-for="(i, y) in item.data" :key="y">{{ i.label
                                                                            }}</el-radio>
                                                                    </el-radio-group>
                                                                    <!-- 文本 -->
                                                                    <div v-if="item.type == 'text'" class="text_style">
                                                                        {{ item.title || '' }}
                                                                    </div>
                                                                    <!-- 颜色选择（双） -->
                                                                    <div v-if="item.type === 'doubleColor'">
                                                                        <el-color-picker :value="item.default"
                                                                            style="margin-right: 15px;"></el-color-picker>
                                                                        <el-color-picker
                                                                            :value="item.default2"></el-color-picker>
                                                                    </div>
                                                                    <!-- 颜色选择器（单） -->
                                                                    <div class="colorPicker"
                                                                        v-if="item.type == 'color' || item.type == 'defaultColor'">
                                                                        <el-color-picker
                                                                            :value="item.default"></el-color-picker>
                                                                        <div class="title">{{ item.default }}</div>
                                                                    </div>
                                                                    <!-- 字体2 -->
                                                                    <div v-if="item.type === 'defaultSize2'"
                                                                        class="weightAndItalic">
                                                                        <div class="famliy">
                                                                            <el-select :value="item.default" filterable>
                                                                                <el-option
                                                                                    v-for="(item, index) in fontOptions"
                                                                                    :label="item.label" :value="item.value"
                                                                                    :key="index"></el-option>
                                                                            </el-select>
                                                                        </div>
                                                                        <el-tooltip class="item" effect="dark" content="加粗"
                                                                            placement="top">
                                                                            <div class="weight"
                                                                                :class="{ 'select': Boolean(item.default3) }">
                                                                                B
                                                                            </div>
                                                                        </el-tooltip>

                                                                        <el-tooltip class="item" effect="dark" content="斜体"
                                                                            placement="top">
                                                                            <div class="italic"
                                                                                :class="{ 'select': Boolean(item.default4) }">
                                                                                I
                                                                            </div>
                                                                        </el-tooltip>
                                                                    </div>
                                                                    <!-- 字体 -->
                                                                    <div v-if="item.type === 'defaultSize'"
                                                                        class="weightAndItalic">
                                                                        <div class="famliy">
                                                                            <el-select :value="item.default" filterable>
                                                                                <el-option
                                                                                    v-for="(item, index) in fontOptions"
                                                                                    :label="item.label" :value="item.value"
                                                                                    :key="index"></el-option>
                                                                            </el-select>
                                                                        </div>
                                                                        <div class="size">
                                                                            <el-select :value="item.default2">
                                                                                <el-option
                                                                                    v-for="(item, index) in SizeOptions"
                                                                                    :label="item" :value="item"
                                                                                    :key="index"></el-option>
                                                                            </el-select>
                                                                        </div>
                                                                        <el-tooltip class="item" effect="dark" content="加粗"
                                                                            placement="top">
                                                                            <div class="weight"
                                                                                :class="{ 'select': Boolean(item.default3) }">
                                                                                B
                                                                            </div>
                                                                        </el-tooltip>

                                                                        <el-tooltip class="item" effect="dark" content="斜体"
                                                                            placement="top">
                                                                            <div class="italic"
                                                                                :class="{ 'select': Boolean(item.default4) }">
                                                                                I
                                                                            </div>
                                                                        </el-tooltip>
                                                                    </div>
                                                                    <!-- 输入框 -->
                                                                    <div v-if="item.type === 'input' || item.type === 'defaultTitle'"
                                                                        class="input">
                                                                        <el-input :value="item.default" clearable>
                                                                        </el-input>
                                                                    </div>
                                                                    <!-- 颜色选择器（多） -->
                                                                    <div class="colorMultiple_show"
                                                                        v-if="item.type === 'colorMultiple'">
                                                                        <span v-for="(a, b) in replaceColorList" :key="a"
                                                                            :style="`backgroundColor:${a}`"></span>
                                                                        <div>
                                                                            <span>{{ item.default }}</span>
                                                                            <i class="el-icon-arrow-down"></i>
                                                                        </div>
                                                                    </div>
                                                                    <!-- 开关 -->
                                                                    <div v-if="item.type === 'switch'" class="input">
                                                                        <el-switch :value="Boolean(Number(item.default))"
                                                                            :inactive-text="item.left"
                                                                            :active-text="item.right">
                                                                        </el-switch>
                                                                    </div>
                                                                    <!-- check复选框 -->
                                                                    <div class="select_items" v-if="item.type === 'check'">
                                                                        <el-checkbox-group v-model="item.default">
                                                                            <el-checkbox v-for="(i, y) in item.data"
                                                                                :key="y" :label="i.value">{{ i.label
                                                                                }}</el-checkbox>
                                                                        </el-checkbox-group>
                                                                    </div>
                                                                    <!-- slider滑动组件 -->
                                                                    <div class="breach_div" v-if="item.type === 'slider'">
                                                                        <el-tooltip class="item" effect="dark"
                                                                            :content="item.tooltip" placement="top">
                                                                            <span class="breach_div_icon">
                                                                                <i class="el-icon-question"
                                                                                    v-if="item.tooltip"></i>
                                                                            </span>
                                                                        </el-tooltip>
                                                                        <div class="breach_div_slider">
                                                                            <el-slider :value="Number(item.default)"
                                                                                :max="Number(item.max)"
                                                                                :min="Number(item.min)"
                                                                                :step="Number(item.step)"></el-slider>
                                                                        </div>
                                                                    </div>
                                                                    <!-- 图标选择器 -->
                                                                    <template v-if="item.type === 'iconSelector'">
                                                                        <el-select v-model="item.default"
                                                                            placeholder="请选择图标" ref="iconSelector"
                                                                            collapse-tags>
                                                                            <template slot="prefix">
                                                                                <div class="prefix_select">
                                                                                    <i class="iconfont"
                                                                                        :class="selectorList.find(i => i.value === item.default).label"
                                                                                        style="font-size:25px;"></i>
                                                                                </div>
                                                                            </template>
                                                                            <el-option
                                                                                v-for="item in selectorList.filter(i => item.data.includes(i.value))"
                                                                                :key="item.value" :label="item.value"
                                                                                :value="item.value">
                                                                                <i class="iconfont" :class="item.label"
                                                                                    style="font-size:25px;"></i>
                                                                            </el-option>
                                                                        </el-select>
                                                                    </template>
                                                                </el-form-item>
                                                                <i class="el-icon-edit itemEdit"
                                                                    @click="editComponent(item)"></i>
                                                                <i class="el-icon-delete itemDelete"
                                                                    @click="delComItem(data.config, item.id)"></i>
                                                            </div>
                                                        </div>
                                                    </el-collapse-item>
                                                    <i class="el-icon-edit collapseEdit" @click="editComponent(data)"></i>
                                                    <i class="el-icon-delete collapseDelete"
                                                        @click="delComponent(data.id)"></i>
                                                </div>
                                            </div>
                                        </el-collapse>
                                    </el-tab-pane>
                                    <el-tab-pane label="图表说明" name="Instructions">
                                        <div>
                                            <img :src="Instructions" width="100%" />
                                        </div>
                                    </el-tab-pane>
                                    <el-tab-pane label="说明书" name="specification">
                                        <div>
                                            <img :src="specification" width="100%" />
                                        </div>
                                    </el-tab-pane>
                                    <el-tab-pane label="脚本上传" name="script">
                                        <div class="input_script">
                                            <div class="title">执行命令：</div>
                                            <el-input v-model="menuForm.scriptCommand" type="textarea"
                                                placeholder="请输入脚本执行命令" :rows="5"></el-input>
                                        </div>
                                        <div class="upload_script">
                                            <el-upload class="upload-demo" action="" :on-preview="onPreview"
                                                :on-remove="handleRemove" :http-request="handleUpload"
                                                :before-remove="beforeRemove" multiple :file-list="scriptList">
                                                <el-button size="small" type="primary" class="upload_btn">点击上传</el-button>
                                            </el-upload>
                                            <el-button size="small" class="download_btn" :disabled="!scriptList.length"
                                                @click="downloadScript">下载脚本</el-button>
                                        </div>
                                    </el-tab-pane>
                                </el-tabs>
                            </div>
                        </template>
                    </template>
                    <!-- 生成页面 -->
                    <template v-if="step === 2">
                        <div class="generation_page">
                            页面已成功配置,点击记录后重新登录账号即可！
                        </div>
                    </template>
                </div>
            </el-form>
            <div class="btn_list">
                <el-button icon="el-icon-arrow-left" size="small" v-if="step !== 0" @click="stepUp()">上一步</el-button>
                <el-button size="small" @click="stepDown()" v-if="step !== 2">下一步<i
                        class="el-icon-arrow-right el-icon--right"></i></el-button>
                <el-button type="primary" icon="el-icon-check" size="small" v-if="step === 2"
                    @click="saveMenuConfig">记录</el-button>
            </div>
        </div>
        <!-- 编辑表格 -->
        <el-dialog title="表格列添加" :visible.sync="tableVisible" width="400px" :close-on-press-escape="false"
            :close-on-click-modal="false" :modal="false" v-dialogDrag>
            <el-form ref="tableInfo" :model="tableInfo" label-width="100px" label-position="left">
                <el-form-item label="列名">
                    <el-input v-model="tableInfo.label"></el-input>
                </el-form-item>
                <el-form-item label="编码">
                    <el-input v-model.trim="tableInfo.prop"
                        @input="val => tableInfo.prop = val.replace(/[^a-zA-Z0-9_]/g, '')"
                        placeholder="只能输入英文字母数字和下划线"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="tableInfoConfirm" size="small">确 定</el-button>
                <el-button @click="tableInfoCancel" size="small">取 消</el-button>
            </span>
        </el-dialog>
        <!-- 添加组件 -->
        <el-dialog title="组件添加" :visible.sync="componentVisible" width="400px" :close-on-press-escape="false"
            :close-on-click-modal="false" :modal="false" v-dialogDrag>
            <el-form ref="componentForm" :model="componentInfo" label-width="95px" v-show="componentVisible"
                :rules="componentInfoRules">
                <!-- label -->
                <template>
                    <el-form-item label="组件名称" :key="1" prop="title">
                        <el-input v-model="componentInfo.title"></el-input>
                    </el-form-item>
                </template>
                <!-- code -->
                <template>
                    <el-form-item label="组件编码" :key="2" v-if="typeOfCode(componentInfo.type)" prop="code">
                        <el-input v-model="componentInfo.code"
                            @input="val => componentInfo.code = val.replace(/[^a-zA-Z0-9_]/g, '')"
                            placeholder="只能输入英文字母数字和下划线"></el-input>
                    </el-form-item>
                </template>
                <!-- 字体code -->
                <template>
                    <el-form-item label="字体编码" :key="3" v-if="typeOfCode2(componentInfo.type)" prop="code">
                        <el-input v-model="componentInfo.code"
                            @input="val => componentInfo.code = val.replace(/[^a-zA-Z0-9_]/g, '')"
                            placeholder="只能输入英文字母数字和下划线"></el-input>
                    </el-form-item>
                </template>
                <!-- 字号code -->
                <template>
                    <el-form-item label="字号编码" :key="4" v-if="componentInfo.type === 'defaultSize'" prop="code2">
                        <el-input v-model="componentInfo.code2"
                            @input="val => componentInfo.code2 = val.replace(/[^a-zA-Z0-9_]/g, '')"
                            placeholder="只能输入英文字母数字和下划线"></el-input>
                    </el-form-item>
                </template>
                <!-- 加粗code -->
                <template>
                    <el-form-item label="加粗编码" :key="5" v-if="typeOfCode2(componentInfo.type)" placeholder="只能输入英文字母数字和下划线"
                        prop="code3">
                        <el-input v-model="componentInfo.code3"
                            @input="val => componentInfo.code3 = val.replace(/[^a-zA-Z0-9_]/g, '')"></el-input>
                    </el-form-item>
                </template>
                <!-- 倾斜code -->
                <template>
                    <el-form-item label="倾斜编码" :key="6" v-if="typeOfCode2(componentInfo.type)" placeholder="只能输入英文字母数字和下划线"
                        prop="code4">
                        <el-input v-model="componentInfo.code4"
                            @input="val => componentInfo.code4 = val.replace(/[^a-zA-Z0-9_]/g, '')"></el-input>
                    </el-form-item>
                </template>
                <!-- tooltip -->
                <template>
                    <el-form-item label="提示文本" :key="7" v-if="typeOftooltip(componentInfo.type)">
                        <el-input v-model="componentInfo.tooltip"></el-input>
                    </el-form-item>
                </template>
                <!-- label -->
                <template>
                    <el-form-item label="组件label" :key="8" v-if="typeOflabel(componentInfo.type)">
                        <el-input v-model="componentInfo.label" placeholder="文本，逗号分隔"></el-input>
                    </el-form-item>
                </template>
                <!-- label -->
                <template>
                    <el-form-item label="组件value" :key="9" v-if="typeOfvalue(componentInfo.type)">
                        <el-input v-model="componentInfo.value" placeholder="值，逗号分隔"></el-input>
                    </el-form-item>
                </template>
                <!-- radius -->
                <template>
                    <el-form-item label="标记范围" :key="10" v-if="componentInfo.type === 'slider'">
                        <el-input v-model="componentInfo.radius" placeholder="逗号分隔"></el-input>
                    </el-form-item>
                </template>
                <!-- step -->
                <template>
                    <el-form-item label="滑动步长" :key="11" v-if="componentInfo.type === 'slider'">
                        <el-input v-model="componentInfo.step" placeholder="逗号分隔"
                            @input="val => componentInfo.step = val.replace(/[^0-9,，.]/g, '')"></el-input>
                    </el-form-item>
                </template>
                <!-- max -->
                <template>
                    <el-form-item label="取值上限" :key="24" v-if="componentInfo.type === 'abundance'">
                        <el-input v-model.tirm="componentInfo.max"
                            @input="val => componentInfo.max = val.replace(/[^0-9_]/g, '')"></el-input>
                    </el-form-item>
                </template>
                <!-- left -->
                <template>
                    <el-form-item label="左侧文本" :key="25" v-if="componentInfo.type === 'switch'">
                        <el-input v-model.tirm="componentInfo.left"></el-input>
                    </el-form-item>
                </template>
                <!-- right -->
                <template>
                    <el-form-item label="右侧文本" :key="12" v-if="componentInfo.type === 'switch'">
                        <el-input v-model.tirm="componentInfo.right"></el-input>
                    </el-form-item>
                </template>
                <!-- default -->
                <!-- 旋转角度 -->
                <el-form-item label="默认值" :key="13" v-if="componentInfo.type === 'defaultAngle'">
                    <el-select v-model.trim="componentInfo.default" filterable>
                        <el-option v-for="(item, index) in RotateOptions" :label="item" :value="item"
                            :key="index"></el-option>
                    </el-select>
                </el-form-item>
                <!-- 颜色（双） -->
                <el-form-item label="默认值" :key="14" v-else-if="componentInfo.type === 'doubleColor'">
                    <el-color-picker v-model.trim="componentInfo.default"
                        style="transform: translateY(15px);margin-bottom: 15px;"></el-color-picker>
                    <el-color-picker v-model.trim="componentInfo.default2"
                        style="transform: translateY(15px);margin-bottom: 15px;"></el-color-picker>
                </el-form-item>
                <!-- 颜色 -->
                <el-form-item label="默认值" :key="15"
                    v-else-if="componentInfo.type === 'defaultColor' || componentInfo.type === 'color'">
                    <el-color-picker v-model.trim="componentInfo.default"
                        style="transform: translateY(15px);margin-bottom: 15px;"></el-color-picker>
                </el-form-item>
                <!-- 字体 -->
                <template v-else-if="componentInfo.type === 'defaultSize'">
                    <el-form-item label="字体默认值" :key="16">
                        <el-select v-model.trim="componentInfo.default" filterable>
                            <el-option v-for="(item, index) in fontOptions" :label="item.label" :value="item.value"
                                :key="index"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="字号默认值" :key="17">
                        <el-select v-model.trim="componentInfo.default2" filterable>
                            <el-option v-for="(item, index) in SizeOptions" :label="item" :value="item"
                                :key="index"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="加粗默认值" :key="18">
                        <el-select v-model.trim="componentInfo.default3" filterable>
                            <el-option v-for="(item, index) in weightOptions" :label="item.label" :value="item.value"
                                :key="index"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="倾斜默认值" :key="19">
                        <el-select v-model.trim="componentInfo.default4" filterable>
                            <el-option v-for="(item, index) in weightOptions" :label="item.label" :value="item.value"
                                :key="index"></el-option>
                        </el-select>
                    </el-form-item>
                </template>
                <!-- 字体2 -->
                <template v-else-if="componentInfo.type === 'defaultSize2'">
                    <el-form-item label="字体默认值" :key="20">
                        <el-select v-model.trim="componentInfo.default" filterable>
                            <el-option v-for="(item, index) in fontOptions" :label="item.label" :value="item.value"
                                :key="index"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="加粗默认值" :key="21">
                        <el-select v-model.trim="componentInfo.default3" filterable>
                            <el-option v-for="(item, index) in weightOptions" :label="item.label" :value="item.value"
                                :key="index"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="倾斜默认值" :key="22">
                        <el-select v-model.trim="componentInfo.default4" filterable>
                            <el-option v-for="(item, index) in weightOptions" :label="item.label" :value="item.value"
                                :key="index"></el-option>
                        </el-select>
                    </el-form-item>
                </template>
                <!-- 颜色编辑器 -->
                <template v-else-if="componentInfo.type === 'colorMultiple'">
                    <el-form-item label="默认值" :key="23">
                        <div class="btn_replace defalut">
                            <div class="replace_main">
                                <div class="replace" @click="selectReplace(componentInfo.id)">
                                    <div>
                                        <span v-for="(item, index) in replaceColorList" :key="index"
                                            :style="`backgroundColor:${item}`"></span>
                                    </div>
                                    <b>{{ componentInfo.default }}</b>
                                    <i class="el-icon-arrow-down"></i>
                                </div>
                                <el-select v-model.trim="componentInfo.default" :ref="`select${componentInfo.id}`"
                                    @change="changeReplace">
                                    <el-option v-for="i in selectColorList" :key="i.value" :label="i.label"
                                        :value="i.value">
                                        <span class="colorSelect">
                                            <span v-for="(n, m) in i.content.filter((item, index) => index < 7)" :key="m"
                                                :style="`backgroundColor:${n}`"></span>
                                            <b>{{ i.label }}</b>
                                        </span>
                                    </el-option>
                                </el-select>
                            </div>
                        </div>
                    </el-form-item>
                </template>
                <!-- 分组 -->
                <template v-else-if="componentInfo.type === 'Xgroup' || componentInfo.type === 'Ygroup'">
                    <el-form-item label="默认值" :key="27">
                        <el-checkbox-group v-model="componentInfo.default">
                            <el-checkbox label="1">分组</el-checkbox>
                            <el-checkbox label="0">样本</el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                </template>
                <!-- 图标选择器 -->
                <template v-else-if="componentInfo.type === 'iconSelector'">
                    <el-form-item label="图标选择" :key="30">
                        <el-select v-model="componentInfo.data" placeholder="请选择图标" ref="iconSelector" multiple
                            collapse-tags>
                            <el-option v-for="item in selectorList" :key="item.value" :label="item.value"
                                :value="item.value">
                                <i class="iconfont" :class="item.label" style="font-size:25px;"></i>
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="默认值" :key="31">
                        <el-select v-model="componentInfo.default" placeholder="请选择图标" ref="iconSelector" collapse-tags>
                            <template slot="prefix">
                                <div class="prefix_select">
                                    <i class="iconfont" :class="icon(selectorList, componentInfo.data, componentInfo.default)"
                                        style="font-size:25px;"></i>
                                </div>
                            </template>
                            <el-option v-for="item in iconList(selectorList,componentInfo.data)" :key="item.value" :label="item.value"
                                :value="item.value">
                                <i class="iconfont" :class="item.label" style="font-size:25px;"></i>
                            </el-option>
                        </el-select>
                    </el-form-item>
                </template>
                <!-- 文件上传 -->
                <template v-else-if="componentInfo.type === 'file'">
                    <el-form-item label="文件类型" :key="28">
                        <el-select v-model.trim="componentInfo.default" filterable>
                            <el-option label="表格" value="tabulation"></el-option>
                            <el-option label="文本" value="text"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="上传类型" :key="29">
                        <el-select v-model.trim="componentInfo.default2" filterable>
                            <el-option label="单文件上传" value="singleFile"></el-option>
                            <el-option label="多文件上传" value="multifile"></el-option>
                        </el-select>
                    </el-form-item>
                </template>

                <el-form-item label="默认值" :key="26" v-if="typeOfdefault(componentInfo.type)">
                    <el-input v-model.tirm="componentInfo.default"
                        :placeholder="placeholderInfo(componentInfo.type)"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="ComponentConfirm" size="small">确 定</el-button>
                <el-button @click="componentCancel" size="small">取 消</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>

import Sortable from 'sortablejs';
import { VueEditor } from 'vue2-editor'
import {
    uploadAnalysisDescriptionRequest,
    deleteAnalysisChartDescriptionRequest,
    uploadAnalysisScriptFileRequest,
    deleteAnalysisScriptFileRequest,
    uploadAnalysisSpecificationRequest,
    deleteAnalysisSpecificationRequest,
    downloadAnalysisScriptRequest
} from '@/api/cloudAnalysis'
import {
    uploadScriptFileRequest,
    deleteScriptFileRequest,
    downloadScriptRequest,
    chartFileRequest,
    delChartFileRequest,
    gifFileRequest,
    delGifFileRequest
} from '@/api/tools'
import mixins from './mixins';
export default {
    mixins: [mixins],
    name: 'GenecloudUiMenuConfig',
    props: {
        editRow: {
            type: Object,
            default: () => { }
        }
    },
    components: {
        VueEditor
    },
    watch: {
        editRow: {
            handler(val, newVal) {
                if (val) {
                    this.init(val)
                }
            },
            deep: true,
            immediate: true
        },
        'activeName': {
            handler(val, newVal) {
                if (val === 'table') {
                    this.$nextTick(function () {
                        this.sortDrag();
                    });
                } else if (val === 'chart') {
                    this.$nextTick(function () {
                        this.collapseSortDrag();
                    });
                } else if (val === 'Analysis') {
                    this.$nextTick(function () {
                        this.analysisSortDrag();
                    });
                }
            },
            deep: true,
            immediate: true
        },
        collapseName: {
            handler(val, newVal) {
                if (val) {
                    this.$nextTick(function () {
                        let item = this.menuForm.legendConfig.find(i => i.id === val)
                        this.collapseItemSortDrag(val, item.config)
                    });
                }
            },
            deep: true,
            immediate: true
        },
        'menuForm.type': {
            handler(val, newVal) {
                let list = {
                    1: 'text',
                    2: 'picAndtable',
                    3: 'table',
                    4: 'pic',
                    5: 'web'
                }
                if (val) {
                    this.pic = list[val]
                }
            },
            deep: true,
            immediate: true
        },
        'menuForm.analysisConfig': {
            handler(val, newVal) {
                if (val) {
                    let res = val.some(i => i.type === 'circleItem')
                    let res2 = val.some(i => i.type === 'file' && i.code === 'data')
                    if (!res && !res2) {
                        this.menuForm.analysisConfig.push({
                            code: 'data',
                            default: 'tabulation',
                            default2: 'singleFile',
                            id: 'data',
                            title: '数据文件',
                            type: 'file'
                        })
                        let valid = JSON.parse(localStorage.getItem('valid')) || []
                        valid.push('data')
                        localStorage.setItem('valid', JSON.stringify(valid || []))
                    }
                }
            },
            deep: true
        }
    },
    data() {
        let validateCom = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请填写组件编码"));
            } else if (!/^[a-zA-Z0-9_]/.test(value)) {
                callback(new Error("组件编码仅支持英文字母数字和下划线!"));
            } else if (value === this.componentInfo.code2 || value === this.componentInfo.code3 || value === this.componentInfo.code4) {
                callback(new Error("code重复!"));
            } else {
                callback();
            }
        }
        let validateCom2 = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请填写组件编码"));
            } else if (!/^[a-zA-Z0-9_]/.test(value)) {
                callback(new Error("组件编码仅支持英文字母数字和下划线!"));
            } else if (value === this.componentInfo.code || value === this.componentInfo.code3 || value === this.componentInfo.code4) {
                callback(new Error("code重复!"));
            } else {
                callback();
            }
        }
        let validateCom3 = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请填写组件编码"));
            } else if (!/^[a-zA-Z0-9_]/.test(value)) {
                callback(new Error("组件编码仅支持英文字母数字和下划线!"));
            } else if (value === this.componentInfo.code2 || value === this.componentInfo.code || value === this.componentInfo.code4) {
                callback(new Error("code重复!"));
            } else {
                callback();
            }
        }
        let validateCom4 = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请填写组件编码"));
            } else if (!/^[a-zA-Z0-9_]/.test(value)) {
                callback(new Error("组件编码仅支持英文字母数字和下划线!"));
            } else if (value === this.componentInfo.code2 || value === this.componentInfo.code3 || value === this.componentInfo.code) {
                callback(new Error("code重复!"));
            } else {
                callback();
            }
        }
        return {
            options: [
                {
                    value: 'value',
                    label: 'label'
                },
                {
                    value: 'value1',
                    label: 'label1'
                }
            ],
            replaceColorList: [],
            selectorList: this.$publicData('selectorList'),
            icons: [],
            selectColorList: this.$publicData('colorList'),
            fontOptions: this.$publicData('fontFamily'),
            RotateOptions: this.$publicData('rotate'),
            SizeOptions: this.$publicData('fontSize'),
            weightOptions: [
                {
                    label: '是',
                    value: 1
                },
                {
                    label: '否',
                    value: 0
                }
            ],
            mutualExclusion: [
                { value: '' },
                { value: '' },
            ],
            mutualExclusionOptions: [
                {
                    value: '选项1',
                    label: '选项1'
                }, {
                    value: '选项2',
                    label: '选项2'
                }, {
                    value: '选项3',
                    label: '选项3'
                }, {
                    value: '选项4',
                    label: '选项4'
                }, {
                    value: '选项5',
                    label: '选项5'
                }
            ],
            //图表上传
            pictureList: [],
            Instructions: null,
            pictureList2: [],
            specification: null,
            tableVisible: false,
            tableInfo: {
                label: null,
                prop: null,
            },
            //分析基本设置
            analysisList: [
                {
                    title: 'X轴分组',
                    type: 'Xgroup',
                },
                {
                    title: 'Y轴分组',
                    type: 'Ygroup',
                },
                {
                    title: '文件上传',
                    type: 'file'
                },
                {
                    title: '圈图配置',
                    type: 'circleItem'
                }
            ],
            //调整基本设置
            settingList: [
                {
                    title: '基本设置',
                    type: 'basic',
                },
                {
                    title: '主标题设置',
                    type: 'main',
                },
                {
                    title: 'X轴设置',
                    type: 'Xaxis',
                },
                {
                    title: 'Y轴设置',
                    type: 'Yaxis',
                },
                {
                    title: '图例设置',
                    type: 'legend',
                },
            ],
            //自定义分组
            customList: [
                {
                    title: '下拉选择器',
                    type: 'select',
                },
                {
                    title: '颜色选择器',
                    type: 'color',
                },
                {
                    title: '输入框',
                    type: 'input',
                },
                {
                    title: '滑块',
                    type: 'slider',
                },
                {
                    title: '复选框',
                    type: 'check',
                },
                {
                    title: '单选框',
                    type: 'radio',
                },
                {
                    title: '开关',
                    type: 'switch',
                },
                {
                    title: '图标选择器',
                    type: 'iconSelector'
                }
            ],
            //常用分组
            commonList: [
                {
                    title: '颜色编辑器',
                    type: 'colorMultiple',
                },
                {
                    title: '标题',
                    type: 'defaultTitle',
                },
                {
                    title: '常用字体1',
                    type: 'defaultSize',
                },
                {
                    title: '常用字体2',
                    type: 'defaultSize2',
                },
                {
                    title: '颜色',
                    type: 'defaultColor',
                },
                {
                    title: '颜色（双）',
                    type: 'doubleColor',
                },
                {
                    title: '旋转角度',
                    type: 'defaultAngle',
                },
                {
                    title: '隔断文本',
                    type: 'text',
                },
                {
                    title: '是否选择器',
                    type: 'defaultRadio',
                },
                {
                    title: '数字下拉',
                    type: 'defaultSelect',
                },
                {
                    title: '丰度取值',
                    type: 'abundance',
                },
                {
                    title: '互斥下拉框',
                    type: 'mutualExclusion',
                }
            ],
            //编辑文本
            editorText: '',
            //组件添加
            componentVisible: false,
            addOrEdit: 'add',
            editId: null,
            collapseName: null,
            componentInfoRules: {
                title: [
                    { required: true, message: '请输入组件名称！', trigger: 'blur' }
                ],
                code: [
                    { required: true, validator: validateCom, trigger: ['blur'] },
                ],
                code2: [
                    { required: true, validator: validateCom2, trigger: ['blur'] },
                ],
                code3: [
                    { required: true, validator: validateCom3, trigger: ['blur'] },
                ],
                code4: [
                    { required: true, validator: validateCom4, trigger: ['blur'] },
                ],
            },
            //脚本文件
            scriptList: [],
            tableName: null,
            pic: null,
            CircleColorList: ['#3a4892', '#ed0000', '#008b45', '#631879', '#00817f', '#ba0020'],
            menuName: null,
        };
    },
    computed: {
        setDisabled() {
            return function (opt, index) {
                // opt为每项option，index为el-select索引
                // 全部已选择
                const selectedArr = this.mutualExclusion.map(item => item.value)
                // 删除自己的已选
                //   selectedArr.splice(index, 1)
                // 其它的已选，禁用
                return selectedArr.includes(opt.value)
            }
        },
        iconList() {
            return function (list, data = []) {
                const item = list.filter(i => data.includes(i.value))
                return item
            }
        },
        icon() {
            return function (list, data = [], value) {
                const item = list.filter(i => data.includes(i.value))
                const i = item.find(a => a.value === value)
                return i ? i.label : null
            }
        }
    },
    created() {
        this.menuName = this.$route.fullPath
    },
    methods: {
        //查看脚本信息
        onPreview(value) {
            const page = this.$router.history.current.name === 'editMenu' ? 'chartview ' : 'analysis'
            window.open(`${this.$url(window.location.origin)}/scriptPage?name=${value.name}&pageCode=${this.editRow.pageCode}&page=${page}`)
        },
        selectReplace(id) {
            this.$refs[`select${id}`].toggleMenu()
        },
        changeReplace(value) {
            this.replaceColorList = this.selectColorList.find(item => item.value == value).content.filter((item, index) => index < 7)
            this.value = value
        },
        sortDrag() {
            let self = this
            // 这里的nextTick可以不用，但如果是弹框弹出来，在弹框里排序，弹框关闭就销毁，那还是要的，这时初始化就不要放在mounted中，放在开启弹框的方法中
            this.$nextTick(() => {
                let el = this.$refs.sortRef
                new Sortable(el, {
                    animation: 150,
                    filter: '.sort-none',
                    onStart() { },
                    onEnd(evt) {
                        // 对数组排序进行调整
                        self.menuForm.tableList.splice(evt.newIndex, 0, self.menuForm.tableList.splice(evt.oldIndex, 1)[0])
                        let newArray = self.menuForm.tableList.slice(0)
                        self.menuForm.tableList = []
                        self.$nextTick(() => {
                            self.menuForm.tableList = newArray
                        })
                    }
                })
            })
        },
        analysisSortDrag() {
            let self = this
            // 这里的nextTick可以不用，但如果是弹框弹出来，在弹框里排序，弹框关闭就销毁，那还是要的，这时初始化就不要放在mounted中，放在开启弹框的方法中
            this.$nextTick(() => {
                let el = this.$refs.Analysis_content
                new Sortable(el, {
                    animation: 150,
                    filter: '.sort-none',
                    onStart() { },
                    onEnd(evt) {
                        // 对数组排序进行调整
                        self.menuForm.analysisConfig.splice(evt.newIndex, 0, self.menuForm.analysisConfig.splice(evt.oldIndex, 1)[0])
                        let newArray = self.menuForm.analysisConfig.slice(0)
                        self.menuForm.analysisConfig = []
                        self.$nextTick(() => {
                            self.menuForm.analysisConfig = newArray
                        })
                    }
                })
            })
        },
        collapseSortDrag() {
            let self = this
            // 这里的nextTick可以不用，但如果是弹框弹出来，在弹框里排序，弹框关闭就销毁，那还是要的，这时初始化就不要放在mounted中，放在开启弹框的方法中
            this.$nextTick(() => {
                let el = this.$refs.collapseSortRef
                new Sortable(el, {
                    animation: 150,
                    filter: '.sort-none',
                    onStart() {
                        self.collapseName = null
                    },
                    onEnd(evt) {
                        // 对数组排序进行调整
                        self.menuForm.legendConfig.splice(evt.newIndex, 0, self.menuForm.legendConfig.splice(evt.oldIndex, 1)[0])
                        let newArray = self.menuForm.legendConfig.slice(0)
                        self.menuForm.legendConfig = []
                        self.$nextTick(() => {
                            self.menuForm.legendConfig = newArray
                        })
                    }
                })
            })
        },
        collapseItemSortDrag(id, config) {
            let self = this
            // 这里的nextTick可以不用，但如果是弹框弹出来，在弹框里排序，弹框关闭就销毁，那还是要的，这时初始化就不要放在mounted中，放在开启弹框的方法中
            this.$nextTick(() => {
                let el = this.$refs[`collapseItemSortRef${id}`][0]
                new Sortable(el, {
                    animation: 150,
                    filter: '.sort-none',
                    onStart() { },
                    onEnd(evt) {
                        // 对数组排序进行调整
                        config.splice(evt.newIndex, 0, config.splice(evt.oldIndex, 1)[0])
                        let newArray = config.slice(0)
                        config = []
                        self.$nextTick(() => {
                            config = newArray
                        })
                    }
                })
            })
        },
        changeUpload(file, fileList) {
            if (fileList.length > 1) {
                fileList.splice(0, 1);
            }
            this.Instructions = fileList[0].url
            this.pictureList = fileList
        },
        changeUpload2(file, fileList) {
            if (fileList.length > 1) {
                fileList.splice(0, 1);
            }
            this.specification = fileList[0].url
            this.pictureList2 = fileList
        },
        //删除图表说明
        async removePictureList(file) {
            let api = this.menuName.includes('editMenu') ? delChartFileRequest : deleteAnalysisChartDescriptionRequest
            const res = await api({
                pageCode: this.editRow.pageCode,
            })
            if (res.code !== 200) return this.$message.error(res.message)
            this.Instructions = ''
            this.pictureList = []
            this.$forceUpdate()
        },
        //删除说明书
        async removePictureList2(file) {
            let api = this.menuName.includes('editMenu') ? delGifFileRequest : deleteAnalysisSpecificationRequest
            const res = await api({
                pageCode: this.editRow.pageCode,
            })
            if (res.code !== 200) return this.$message.error(res.message)
            this.specification = ''
            this.pictureList2 = []
            this.$forceUpdate()
        },
        beforeRemove(file, fileList) {
            return this.$confirm(`确定移除 ${file.name}？`);
        },
        //图表说明上传
        async pictureListUpload(file) {
            let api = this.menuName.includes('editMenu') ? chartFileRequest : uploadAnalysisDescriptionRequest
            const formData = new FormData();
            formData.append('file', file.file);
            // console.log(file.file,'file');
            const res = await api(this.editRow.pageCode, formData)
            if (res.code !== 200) return this.$message.error(res.message)
        },
        //说明书上传
        async pictureListUpload2(file) {
            let api = this.menuName.includes('editMenu') ? gifFileRequest : uploadAnalysisSpecificationRequest
            const formData = new FormData();
            formData.append('file', file.file);
            const res = await api(this.editRow.pageCode, formData)
            if (res.code !== 200) return this.$message.error(res.message)
        },
        //新增表格列信息
        addTableList() {
            this.tableVisible = true
        },
        //取消列添加
        tableInfoCancel() {
            this.tableVisible = false
            this.tableInfo = {
                label: null,
                prop: null,
            }
        },
        //清除所有列
        resetTableList() {
            this.$confirm('该操作将重置表格所有列，是否继续？', '提示', {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'error',
                beforeClose: async (action, instance, done) => {
                    if (action === 'confirm') {
                        this.menuForm.tableList = []
                    } else if (action === 'cancel') {
                        this.$message({
                            message: '取消操作',
                        })
                    }
                    done();
                }
            }).catch(() => { })
        },
        //上一步
        stepUp() {
            this.step--
            this.activeName = 'specification'
        },
        //下一步
        stepDown() {
            this.step++
            this.activeName = 'specification'
        },
        //是否展示input(code)
        typeOfCode(type) {
            const list = ['text', 'defaultSize2', 'defaultSize', 'basic', 'main', 'Xaxis', 'Yaxis', 'legend']
            if (list.includes(type)) {
                return false
            } else {
                return true
            }
        },
        //是否展示input(code2)
        typeOfCode2(type) {
            const list = ['defaultSize2', 'defaultSize']
            if (list.includes(type)) {
                return true
            } else {
                return false
            }
        },
        //是否展示input(tooltip)
        typeOftooltip(type) {
            const list = ['slider', 'abundance']
            if (list.includes(type)) {
                return true
            } else {
                return false
            }
        },
        //是否展示input(default)
        typeOfdefault(type) {
            let list = ['abundance', 'defaultSelect', 'defaultRadio', 'defaultTitle', 'switch', 'radio', 'check', 'slider', 'input', 'select']
            if (list.includes(type)) {
                return true
            } else {
                return false
            }
        },
        //是否展示input(label)
        typeOflabel(type) {
            const list = ['select', 'defaultSelect', 'radio', 'check']
            if (list.includes(type)) {
                return true
            } else {
                return false
            }
        },
        //是否展示input(value)
        typeOfvalue(type) {
            const list = ['select', 'radio', 'check']
            if (list.includes(type)) {
                return true
            } else {
                return false
            }
        },
        //占位符编辑
        placeholderInfo(type) {
            let obj = {
                'defaultSelect': '组件label中取值,单个',
                'defaultRadio': '默认值为0或1',
                'switch': '默认值为0或1',
                'radio': 'value中任选(单个)',
                'check': 'value中任选(可多个，逗号分隔)',
                'slider': '标记范围内取值',
                'select': '组件value中取值,单个'
            }
            return obj[type]
        },
        //取消
        componentCancel() {
            this.componentVisible = false
            this.componentInfo = {
                //组件名称
                title: '',
                //组件编码
                code: '',
                //组件编码
                code2: '',
                //组件编码
                code3: '',
                //组件编码
                code4: '',
                //组件提示语
                tooltip: '',
                //组件默认值
                default: '',
                //组件默认值
                default2: '',
                //组件默认值
                default3: 1,
                //组件默认值
                default4: 1,
                //组件类型
                type: '',
                //组件label
                label: '',
                //组件value
                value: '',
                //组件标记范围
                radius: '',
                //组件提示文本
                tooltip: '',
                //组件滑动步长
                step: '',
                //取值上限
                max: '',
                //左侧文本
                left: '',
                //右侧文本
                right: '',
            }
        },
        addTableName() {
            this.menuForm.tableName = this.tableName
            this.tableName = null
            this.$message({
                type: 'success',
                message: '更新成功！'
            })
        },
        //删除脚本
        async handleRemove(file, fileList) {
            let api = this.menuName.includes('editMenu') ? deleteScriptFileRequest : deleteAnalysisScriptFileRequest
            const res = await api({
                cloudPictureCode: this.editRow.pageCode,
                pageCode: this.editRow.pageCode,
                fileName: file.name
            })
            if (res.code !== 200) {
                this.$message.error(res.message)
            }
        },
        //上传脚本
        async handleUpload(file) {
            let api = this.menuName.includes('editMenu') ? uploadScriptFileRequest : uploadAnalysisScriptFileRequest
            const formData = new FormData();
            formData.append('file', file.file);
            const res = await api(this.editRow.pageCode, formData)
            if (res.code !== 200) return this.$message.error(res.message)
            this.scriptList.push({ name: file.file.name })
        },
        //下载脚本信息
        async downloadScript() {
            let api = this.menuName.includes('editMenu') ? downloadScriptRequest : downloadAnalysisScriptRequest
            let pageCode = this.editRow.pageCode
            const res = await api({ pageCode })
            this.$dropDown(res, pageCode + '页面脚本.zip')
        },
    },
};
</script>

<style lang="scss" scoped>
@import './menuConfig.scss';
</style>